<template>
   <div class="mySwiper" :style="[{'background-image' : 'url('+ changeBg+'?imageView&blur=40x20'+')'} , {'background-size':'6000px'} , {'background-position':'center center'} ,{'transition':'all .7s'}]" >
    <div class="swiperContenre">
      <div class="swiper_body" v-on="{mouseenter: enter , mouseleave : leave}">
        <ul>
           <swiperItem v-for="(item , index) in banners" :key="index" :index="index">
             <li class="lis" >
               <a href="javascript:;" @click="toPage(item.typeTitle , item.targetId)"><img :src="item.imageUrl+'?imageView&quality=89'" /></a>
             </li>
           </swiperItem>
        </ul>
         <div class="round_box">
          <a href="javascript:;" 
           v-for="(item , index) in banners" 
           :key="index"
           :class="['round',{'selectRound': round == index}]"
           ></a>
        </div>
        <div class="left_btn" @click="left"></div>
        <div class="right_btn" @click="right"></div>
      </div>
      <div class="download">
        <a href="javascript:;" class="btn" @click="todownload"></a>
        <p>PC 安卓 iPhone iPad Mac 六大客户端</p>
        <span class="shadow_1"></span>
        <span class="shadow_2"></span>
      </div>
    </div>
  </div>
</template>

<script>
import { getBanner } from "../../../network/discover";
import swiperItem from './swiper-Item.vue'  
export default {
  components: {
    swiperItem
  },
  data() {
    return {
       banners:[], //轮播图总数居
       index:0,  //第一张图的索引
       round:0,
       flag:true ,     //节流阀
       revolveTime:null
    };
  },
  computed: {
    changeBg(){
        return this.banners.length ? this.banners[this.index].imageUrl :null
    },
  },
  methods:{
        enter(){   //鼠标进入停止滚动
           clearTimeout(this.revolveTime)
           this.revolveTime = null
        },
        leave(){   //鼠标离开开始滚动
          this.run()
        },
        run(){    //自动滚动
        this.revolveTime = setInterval(() => {
                   this.right()
                }, 2000);
         },
        right(){  //点击右键向右滚
          if(this.flag){
              this.index++
            if(this.index > this.banners.length -1){
               this.index = 0
            }
          }
           
        },
        left(){  //点击左键向左滚
          this.index --
           if(this.index < 0){
               this.index = this.banners.length - 1
            }
        },
         childrenShow(){  //向每一张轮播图item发送当前滚动索引
          this.$children.forEach(i => {
             i.listSlecct = this.index
          })
        },
        toPage(title , id){       //点击轮播图去往相应页面
          if(title === "新歌首发"){
             this.$router.push({path:'/home/song' , query:{id : id}})
          }else if(title === "新碟首发"){
             this.$router.push({path:'/home/album/' ,query:{id :id}})
          }
        },
        todownload(){
          this.$router.push({path:'/download'})
        } 
  },
  watch:{
    index(changeIndex){
         this.childrenShow()
         this.round = changeIndex
    }
  },    
  created() {
    getBanner(0).then((res) => {
       this.banners = res.data.banners
    });
    this.run()
  },
};
</script>

<style scoped>
.v-enter, .v-leave-to{opacity: 0;}
.v-enter-active, .v-leave-active{transition: opacity .7s;} 
.mySwiper {
  width: 100%;
}
.mySwiper .swiperContenre {
  width: 982px;
  height: 270px;
  margin: 0 auto;
  position: relative;
}
.download {
  width: 253px;
  height: 100%;
  display: inline-block;
  position: absolute;
  top: 0px;
  right: 0px;
}
.download .btn{
  display: block;
  width: 253px;
  height: 100%;
  background-image: url("../../../assets/imgs/download.png");
  /* background-position: -15px 0px; */
  background-repeat: no-repeat;
  background-size: 256px 359px;
}
.download p {
  width: 100%;
  height: 35px;
  color: #8d8d8d;
  position: absolute;
  top: 250px;
  left: 7px;
  display: block;
  font-size: 10px;
  text-align: center;
}
.shadow_1 {
  position: absolute;
  top: 0px;
  left: -18px;
  display: block;
  height: 100%;
  width: 18px;
  background-image: url("../../../assets/imgs/侧边条.png");
  background-position: -1px 0;
}
.shadow_2 {
  position: absolute;
  top: 0px;
  right: -16px;
  display: block;
  height: 100%;
  width: 18px;
  background-image: url("../../../assets/imgs/侧边条.png");
  background-position: -18px 0;
}
.swiper_body {
  width: 730px;
  height: 100%;
  overflow: hidden;
  display: inline-block;
}
.swiper_body ul {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}
.lis{width: 730px; height: 100%;display:inline-block;position: absolute;}
.lis a{display: block;}
.lis img{width:100%; height: 100%; display: block;}
.left_btn{width: 38px;height: 64px;position: absolute;top: 50%;left: -90px;background-image: url("../../../assets/imgs/arrl.png");}
.right_btn{width: 38px;height: 64px;position: absolute;top: 50%;right: -90px;background-image: url("../../../assets/imgs/right_btn.png");}
.left_btn:hover{background-color: rgba(0,0,0,.3);}
.right_btn:hover{background-color: rgba(0,0,0,.3);}
.round_box{ display: flex; height: 20px; position: absolute; top: 240px; left: 50%; transform: translateX(-100%);}
.round{width: 20px;height: 20px;display: inline-block;margin-right: 12px; background-image: url("../../../assets/imgs/侧边条.png");background-position: 3px -343px;}
.round:hover{background-position: -12px -343px;}
.selectRound{background-position: -12px -343px;}
</style>